<template>
    <div id="backtoup" @touchstart="backtoupBtn()">
      <img src="/static/images/top.png" id="img">
    </div>
</template>

<script>
export default {
    data:function(){
        return{
            scroll:""
        }
    },
     methods:{
        backtoupScroll(){
            this.scroll = document.documentElement.scrollTop;
            if(this.scroll>300){
                $("#backtoup").css("display","block");
            }else{
                $("#backtoup").css("display","none");
            }
        },
        backtoupBtn(){
            document.documentElement.scrollTop=0;
        },
    },
    mounted(){
        window.addEventListener('scroll', this.backtoupScroll);
    }
}
</script>

<style scoped>
#img{
    width:40px;
    height:40px;
    position:fixed;
    right:10px;;
    bottom:50px;
}
</style>